<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title></title>
        <style>
        .test{
            width:200px;
            height: 200px;
            background: red;
        }
        </style>
    </head>
    <body>
        <ul>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
        </ul>
    </body>
    <script>
    //1.模板字符串
    let div='今天天气不错';
    let className='test';
    let html=`<html>
                <body>
                    <div class="${className}">${div}</div>
                </body>
            </html>`
            console.log(html)
    //2数组的扩展
    //Array.from   把伪数组以及非正式的集合等等转化为正式的数组
    let allLis=document.querySelectorAll('li');
    console.log(allLis);
    console.log(Array.isArray(allLis));
   
    console.log( Array.from(allLis));
    console.log(Array.isArray(Array.from(allLis)))
    //Array.of 把一些零散的数字，字符串等转化为数组
    console.log(Array.of(1,2,3));
    console.log(Array.of('张三','李四','王五'))
    //3.对象的扩展
    let obj={
        'name':'张三',
        'age':18
    };
     console.log(obj);
    //如果key和value一样的话写一个就行了，例如:
    let name='张三';
    let age=18;
    let obj2={
        name,
        age
    };
    console.log(obj2);
    //Object.assign  合并对象
    let obj_1={name:'张三'};
    let obj_2={age:15};
    let obj_3={sex:'男'};
    let obj_0={};
    Object.assign(obj_0,obj_1,obj_2,obj_3);
    console.log(obj_0);
    //延展操作符
    let s_1="今天天气很好！";
    let s_1Arr=[...s_1]; //转化为数组
    console.log(s_1Arr);
    //例如一个去重的例子
    let myArr=[1,2,4,3,2,4];
    console.log(new Set(myArr));
    console.log([...new Set(myArr)]);
    </script>
</html>
<!--箭头函数解决了this指向的问题-->